<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		table,th,tr,td{
		 	border:1px solid #ffcccc;
		 	border-collapse: collapse;
		 	text-align: center;
		 }
	</style>
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>	
<div id="root">
	 <table>
		 <thead>
			 <tr>
				 <th>Name</th>
				 <th>Age</th>
				 <th>Sex</th>
			 </tr>
		 </thead>
		 <tbody>
			 <tr v-for="person in people">
				 <td>{{ person.name }}</td>
				 <td>{{ person.age }}</td>
				 <td>{{ person.sex }}</td>
			 </tr>
		 </tbody>
	 </table>
</div>
<script>
	/**
	 * 4, v-for  类似JS的遍历，用法为 v-for="item in items", items是数组，item为数组中的数组元素。
	 */
	var vm = new Vue({
		el : '#root',
		data : {
			people : [
				{name:"Jack",age:'20',sex:'Female'},
				{name:"Ken",age:'18',sex:'Male'},
				{name:'Susan',age:'20',sex:'Female'},
				{name:'John',age:'30',sex:'Male'}
			]
		}
	});
	/**
	 * 这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。
	 * vue.js 的循环渲染是依赖于 v-for 指令，
	 * 它能够根据 vue 的实例里面的信息，
	 * 循环遍历所需数据，
	 * 然后渲染出相应的内容。
	 * 它可以遍历数组类型以及对象类型的数据，
	 * js 里面的数组本身实质上也是对象，
	 * 这里遍历数组和对象的时候，方式相似但又稍有不同。
	 */
</script>
</body>
</html>